<template>
    <div class="main-shop-info" v-if="!loading">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="image in goodItem.goods_imgs" :key="image">
                <img :src="image" :style="{width: '100%', height: '300px'}" />
            </van-swipe-item>
        </van-swipe>
        <section class="goodsinfo">
            <h2>{{goodItem.goods_name}}</h2>
            <div class="price">${{goodItem.goods_price}}<span class="unit">/st</span></div>
            <div class="desc">{{goodItem.goods_desc}}</div>
            <div class="cart">
                <van-row justify="center" align="center">
                    <van-col><van-stepper theme="round" button-size="40" input-width="200px" /></van-col>
                    <van-col style="width: 40px;"><van-icon name="like-o" color="#FF5E00" size="35" /></van-col>
                </van-row>
            </div>
            <div class="btn">
                <van-button round block type="primary"><strong>Add To cart</strong></van-button>
            </div>
        </section>
        <section class="recommend">
            <header>
                <h3>You may also need</h3>
            </header>
            <div class="warp">
                <div class="box" :style="{width: `${goods_recommend_items.length > 3 ? goods_recommend_items.length * 45.45 : 100}vw`}">
                    <router-link :to="item.url" class="goods-list" v-for="(item, index) in goods_recommend_items" :key="index">
                        <div class="goods">
                            <van-image
                                class="img"
                                radius="5px"
                                :src="item.goods_cover"
                            />
                            <h3 class="goods_name">{{item.goods_name}}</h3>
                            <div class="goods_attr">{{item.goods_attr}}</div>
                            <div class="goods_sku">
                                <van-row justify="space-between" align="center">
                                    <van-col>
                                        <span class="goods_price">$ {{item.goods_price}}</span>
                                    </van-col>
                                    <van-col>
                                        <div class="goods_add" @click.stop="setCart($event, item)"><van-icon name="add" color="#3AA24C" size="30px" /></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
        </section>
    </div>
    <van-skeleton title :row="15" :loading="loading" v-else />
</template>

<script lang="ts" setup>
import { Toast } from 'vant'
import { ref, watch, reactive, inject, onMounted, computed  } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { GetGoodsRecommendList, GetGoodsInfo } from '../../api/index'
import { useStore } from 'vuex'

interface Goods {
    goods_img?: string
    goods_name?: string
    goods_attr?: string
    goods_price?: string
    goods_imgs?: Array<string>
    [propname:string]: any | null
} 

const store = useStore()
const route = useRoute()
const router = useRouter()

const loading = ref(true)

const goodItem: Goods = ref({})
const goods_recommend_items = ref<Array<Goods>>([])
const SetTitle: any = inject('SetTitle')

const getGoodsRecommendList = () => {
    return GetGoodsRecommendList({}).then((res: any)=>{
        goods_recommend_items.value = res.data.map((goods: Goods) => {
            return {
                ...goods,
                 url: {
                    name: 'GoodsInfo',
                    query: {
                        gid: goods.goods_id
                    }
                }
            }
        })
    })
}

const setCart = (e: any, goods: Goods) => {
    e.preventDefault()
    store.dispatch('addCart', {data: goods, num: 1})
    router.push({name: 'CartIndex'})
}

const getGoodsInfo = () => {
    GetGoodsInfo({}).then((res: any)=>{
        console.log(res)
        goodItem.value = res.data
    })
}

onMounted(()=>{
    if(!route.query.gid) {
        router.replace({name: 'ShopIndex'})
    }
    loading.value = true
    Promise.all([getGoodsRecommendList(),getGoodsInfo()]).then(()=>{
        loading.value = false
    })
})

</script>

<style lang="less" scoped>
@categorieslen: 3.3;
@goodslen: 2.2;
.main-shop-info {
    section.goodsinfo {
        margin: 0px 16px 50px 16px;
        h2{
            line-height: 30px;
            padding: 0px;
            margin: 15px 0px 0px 0px;
            font-weight: bold;
            font-size: 24px;
            color: #6D3805;
        }
        .price {
            font-size: 24px;
            line-height: 29px;
            letter-spacing: -0.165px;
            color: #6D3805;
            .unit {
                font-size: 18px;
                padding: 0px 5px;
            }
        }
        .desc {
            margin-top: 20px;
            font-size: 14px;
            line-height: 20px;
            display: flex;
            align-items: center;
            color: #6D3805;
        }
        .cart {
            margin-top: 20px;
            :deep(.van-stepper) {
                margin-right: 10px;
                background: #F4F4F4;
                box-shadow: inset 0px 0px 4px rgba(109, 56, 5, 0.2);
                border-radius: 30px;
                padding: 3px;
                button {
                    background: #fff;
                    color: #6D3805;
                    box-shadow: 0px 1px 2px rgba(109, 56, 5, 0.2);
                }
                input {
                    font-size: 20px;
                    line-height: 29px;
                    color: #6D3805;
                }
            }
        }
        .btn {
            margin-top: 20px;
        }
    }
    section.recommend {
        border-top: 1px solid rgba(109, 56, 5, 0.17);
        padding: 50px 0px 10px 0px;
        header{
            margin: 0px 15px;
            padding: 10px 0px 20px 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h3{
                margin: 0px;
                font-weight: bold;
                font-size: 18px;
                text-transform: capitalize;
                color: #6D3805;
            }
            .link {
                margin-right: 5px;
                font-size: 18px;
                text-transform: capitalize;
                color: #FF5E00;
            }
        }
        .warp {
            width: 100vw;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            .box {
                width: 600vw;
                display: flex;
                .categories-list{
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    margin-left: 15px;
                    justify-items: center;
                    align-items: center;
                    width: 30.3vw;
                    max-width: (480px/@categorieslen);
                    .img {
                        width: 100%;
                    }
                    .categories_name {
                        margin-top: 20px;
                        font-size: 15px;
                        line-height: 18px;
                        color: #6D3805;
                    }
                    &:last-child {
                        margin-right: 15px;
                    }
                }
                .goods-list {
                    margin: 10px;
                    margin-left: 15px;
                    width: 45.45vw;
                    max-width: (480px/@goodslen);
                    background: #FFFFFF;
                    box-shadow: 0px 0px 13px #C4C4C4;
                    border-radius: 20px;
                    .goods {
                        display: flex;
                        flex: 1;
                        flex-direction: column;
                        justify-items: center;
                        align-items: center;
                        padding: 10px;
                        .img {
                            margin: 15px 0px;
                            width: 50%;
                        }
                        .goods_name {
                            width: 100%;
                            font-size: 15px;
                            line-height: 18px;
                            color: #6D3805;
                            padding: 0px;
                            margin: 10px 0px 0px 0px;
                        }
                        .goods_attr {
                            width: 100%;
                            font-size: 12px;
                            line-height: 14px;
                            color: #929292;
                            margin-top: 5px;
                        }
                        .goods_sku {
                            width: 100%;
                            margin-top: 5px;
                            .goods_price {
                                font-family: Klarna Headline;
                                font-weight: bold;
                                font-size: 20px;
                                line-height: 24px;
                                color: #FF5E00;
                            }
                            .goods_add {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
            }

        }
    }
}
</style>
